<template>
	<view>
		<!-- 搜索区域 -->
		<searchBar></searchBar>
		<!-- 左右品牌区域 -->
		<view class="scroll-view-container">
			<scroll-view class="left-scroll" scroll-y="true" :style="{height: he + 'px'}">
				<block v-for="(item, index) in cateList" :key="index">
					<view :class="['scroll-view-container-item', index === active ? 'active' : '']"
						@tap="activeItem(index)">{{item.cat_name}}</view>
				</block>
			</scroll-view>

			<scroll-view scroll-y="true" :style="{height: he + 'px'}">
				<view>
					<image src="../../static/images/titleImage.png"  class="imgb"></image>
				</view>
				<!-- 右侧二级标题 -->
				<view class="cate-lv2" v-for="(item, index) in cateLevel" :key = "index">
					<view class="cate-lv2-title">
						/  {{item.cat_name}}  /
					</view>
					
					<!-- 右侧三级标题 -->
					<view class="cate-lv3-list">
							<view class="cate-lv3-item" v-for="(item3, i3) in item.children" :key = "i3">
								<image :src="item3.cat_icon"></image>
								<text>{{item3.cat_name}}</text>
							</view>
					</view>
				</view>
			
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import searchBar from '../../components/searchBar.vue'

	export default {
		data() {
			return {
				he: 0,
				cateList: [],
				active: 0,
				// 二级分类
				cateLevel:[]

			}
		},
		components: {
			searchBar
		},
		onLoad() {
			const res = uni.getSystemInfoSync()
			// console.log(res)
			this.he = res.windowHeight,
			this.getCateList()
		},
		methods: {
			async getCateList() {
				const res1 = await this.$request({
					url: 'categories'
				})
				this.cateList = res1.data.message
				// console.log(this.cateList)
				this.cateLevel = res1.data.message[0].children
				console.log(res1.data.message[0].children)
			},

			// 左侧的点击事件
			activeItem(index) {
				this.active = index
				// 把侧边栏的点击事件给二级目录，数据一块切换
				this.cateLevel = this.cateList[index].children
			}
		},
	}
</script>

<style lang="less">
	.scroll-view-container {
		display: flex;

		.left-scroll {
			width: 120px;

			.scroll-view-container-item {
				background-color: #f4f4f4;
				line-height: 50px;
				text-align: center;
				font-size: 12px;

				// active激活选项,就是包含当前类名的选项点击之后,根据定义的类名发生变化
				&.active {
					background-color: #FFFFFF;
					position: relative;

					&::before {
						// content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
						content: '';
						display: block;
						width: 3px;
						height: 30px;
						background-color: #c00000;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
		.cate-lv2-title {
			text-align: center;
			font-size: 16px;
			padding-top: 5px;
		}
		.imgb{
			padding-top: 10rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			width: 570rpx;
			height: 180rpx;
			margin: 0 auto;
		}
		.cate-lv3-list{
			display: flex;
			flex-wrap: wrap;
		
			.cate-lv3-item {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-bottom: 10px;
				align-items: center;
				image {
						width:60rpx;
						height: 60rpx;
				}
				text {
					font-size: 12px;
				}
			}
		}
	}
</style>
